<template>
  <div class="me-view-body" v-title :data-title="title">
    <el-container class="me-view-container">
      <!--<el-aside class="me-area">-->
        <!--<ul class="me-operation-list">-->
          <!--<li class="me-operation-item">-->
            <!--<el-button type="primary" icon="el-icon-edit"></el-button>-->
          <!--</li>-->
        <!--</ul>-->
      <!--</el-aside>-->
      <el-main>
        <div class="me-view-card">
          <h1 class="me-view-title">{{article.title}}</h1>
          <div class="me-view-author">
            <a class="">
              <img class="me-view-picture" :src="article.avatar ? article.avatar : defaultAvatar" />
            </a>
            <div class="me-view-info">
              <span>{{article.nickName}}</span>
              <div class="me-view-meta">
                <span>{{article.createTime | parseTime}}</span>
                <span>阅读 {{article.readNumber}}</span>
              </div>
            </div>
            <el-button
              v-if="this.article.userId == this.$store.state.id"
              @click="editArticle()"
              style="position: absolute;left: 60%;"
              size="mini"
              type="success"
              round
              icon="el-icon-edit">编辑</el-button>
          </div>
          <div class="me-view-content">
            <markdown-editor :editor=article.editor></markdown-editor>
          </div>

          <div class="me-view-tag">
            标签：
            <!--<el-tag v-for="t in article.tags" :key="t.id" class="me-view-tag-item" size="mini" type="success">{{t.tagname}}</el-tag>-->
            <el-button @click="tagOrCategory('tag', tag)" size="mini" type="primary" v-for="tag in getTags(article.tags)" :key="tag" round plain>{{tag}}</el-button>
          </div>

          <div class="me-view-tag">
            文章分类：
            <!--<span style="font-weight: 600">{{article.category.categoryname}}</span>-->
            <el-button @click="tagOrCategory('category', article.categoryId)" size="mini" type="primary" round plain>{{article.categoryName}}</el-button>
          </div>

          <div class="me-view-comment">
            <disqus-comment v-if='article.articleId' :articleId="String(article.articleId)" :url="getPageUrl()" ></disqus-comment>
          </div>

        </div>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  import MarkdownEditor from '@/components/markdown/MarkdownEditor'
  import DisqusComment from '@/components/comment/DisqusComment'
  import { viewArticle, incArticleReadNum } from '@/api/article'

  import defaultAvatar from '@/assets/img/default_avatar.jpg'

  export default {
    name: 'BlogView',
    watch: {
      '$route': 'getArticle'
    },
    data() {
      return {
        defaultAvatar: defaultAvatar,
        article: {
          articleId: '',
          title: '',
          commentNumber: 0,
          readNumber: 0,
          summary: '',
          createTime: '',
          userId: '',
          nickName: '',
          avatar: '',
          tags: '',
          category:{},
          editor: {
            value: '',
            toolbarsFlag: false,
            subfield: false,
            defaultOpen: 'preview'
          }
        },
        comments: [],
        comment: {
          artcileId: null,
          content: ''
        }
      }
    },
    components: {
      'markdown-editor': MarkdownEditor,
      DisqusComment
    },
    computed: {
      avatar() {
        let avatar = this.$store.state.avatar
        if (avatar.length > 0) {
          return avatar
        }
        return default_avatar
      },
      title() {
        return `${this.article.title}`
      }
    },
    created() {
      this.getArticle()
      this.incArticleReadNum()
    },
    methods: {
      tagOrCategory(type, id) {
        this.$router.push({path: `/${type}/${id}`})
      },
      getPageUrl(){
        let artcileId = this.article.articleId;
        return `http://gamersgu.com/view/${artcileId}`
      },
      getArticle() {
        let that = this
        viewArticle(that.$route.params.id).then(data => {
          Object.assign(that.article, data.data)
          that.article.editor.value = data.data.content
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '文章加载失败', showClose: true})
          }
        })
      },
      incArticleReadNum() {
          incArticleReadNum(this.$route.params.id);
      },
      commentCountsIncrement() {
        this.article.commentCounts += 1
      },
      getTags(tags) {
        return tags === null ? [] : tags.split(',')
      }
    },
    //组件内的守卫 调整body的背景色
    beforeRouteEnter(to, from, next) {
      window.document.body.style.backgroundColor = '#fff';
      next();
    },
    beforeRouteLeave(to, from, next) {
      window.document.body.style.backgroundColor = '#f5f5f5';
      next();
    }
  }
</script>

<style>

  .me-view-body {
    margin: 100px auto 140px;
  }

  .me-view-container {
    width: 1000px;
  }

  .el-main {
    overflow: hidden;
  }

  .me-view-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
  }

  .me-view-author {
    margin: 30px 0;
    margin-top: 30px;
    vertical-align: middle;
  }

  .me-view-picture {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
  }

  .me-view-info {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
  }

  .me-view-meta {
    font-size: 12px;
    color: #969696;
  }

  .me-view-end {
    margin-top: 20px;
    padding-right: 25px;
  }

  .me-view-tag {
    margin-top: 20px;
    padding-left: 6px;
    border-left: 4px solid #c5cac3;
  }

  .me-view-tag-item {
    margin: 0 4px;
  }

  .me-view-comment {
    margin-top: 60px;
  }

  .me-view-comment-title {
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
  }

  .me-view-comment-write {
    margin-top: 20px;
  }

  .me-view-comment-text {
    font-size: 16px;
  }

  .v-show-content {
    padding: 8px 25px 15px 0px !important;
  }

  .v-note-wrapper .v-note-panel {
    box-shadow: none !important;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    background: #fff !important;
  }


</style>
